<!DOCTYPE html>
<html lang="en">
  <head>
    <title>GET VIDEO</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <input id="address" type="text" disabled />
    <input
      type="button"
      title="开启摄像头"
      value="开启摄像头"
      onclick="getMedia()"
    />
    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button id="snap" onclick="takePhoto()">拍照</button>
    <button id="snap" onclick="changePhoto()">切换</button>
    <div id="map"></div>
    <script
      type="text/javascript"
      src="https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyARaG5UpaWWBnKsMyJ-igfeuqywhog7kOk"
    ></script>
    <script>
      let front = false;
      let num = 1;
      let position = document.getElementById("demo");
      let lat = 0;
      let lag = 0;
      function getMedia() {
        let constraints = {
          video: {
            width: 500,
            height: 500,
            facingMode: front ? "user" : "environment",
          },
          audio: true,
        };
        //获得video摄像头区域
        let video = document.getElementById("video");
        //这里介绍新的方法，返回一个 Promise对象
        // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
        // then()是Promise对象里的方法
        // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
        // 避免数据没有获取到
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (MediaStream) {
          video.srcObject = MediaStream;
          video.play();
        });
      }

      function takePhoto() {
        //获得Canvas对象
        let video = document.getElementById("video");
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, 500, 500);
      }
      function changePhoto() {
        front = !front;
        document.getElementById("text").innerHTML = front;
        getMedia();
      }
      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
      }
    </script>
  </body>
</html>
